<script>
  import { Table } from 'element-ui';
  import { formatTime } from '@/utils/tool.js';
  import HighlightText from './HighlightText.vue';

  function genPropsAndAttrs(rawAttrs, componentProps) {
    console.log(222, componentProps);
    const props = {};
    const attrs = {};
    Object.keys(rawAttrs).forEach((key) => {
      const value = rawAttrs[key];
      // 直接这么使用会报错
      // Do not access Object.prototype method 'hasOwnProperty' from target object
      // if (componentProps.hasOwnProperty(key)) {
      let bool = Object.prototype.hasOwnProperty.call(componentProps, key);
      if (bool) {
        props[key] = value;
      } else {
        attrs[key] = value;
      }
    });
    return { props, attrs };
  }

  export default {
    props: {
      highlightText: {
        type: String,
        default: ''
      }
    },
    data() {
      const commonHighLightSlotScopes = {
        default: (scope) => {
          const text = scope.row[scope.column.property];
          return <HighlightText class="song-table-name" text={text} highlightText={this.highlightText} />;
        }
      };
      return {
        songs: [
          {
            name: '锦湖',
            artistsText: '暗杠',
            albumName: '暗杠',
            durationSecond: 258
          },
          {
            name: '那由他',
            artistsText: '方磊',
            albumName: '素人',
            durationSecond: 304
          },
          {
            name: '囍',
            artistsText: '葛洞琪',
            albumName: '囍',
            durationSecond: 216
          },
          {
            name: 'Bones',
            artistsText: 'Imagine Dragons',
            albumName: 'Bones',
            durationSecond: 165
          },
          {
            name: '谁能明白我',
            artistsText: '林子祥',
            albumName: '林子祥38年音乐习作',
            durationSecond: 322
          },
          {
            name: '敢爱敢做',
            artistsText: '林子祥',
            albumName: '林子祥38年音乐习作',
            durationSecond: 300
          },
          {
            name: '生之响往',
            artistsText: '刺猬',
            albumName: '生之响往',
            durationSecond: 356
          }
        ],
        columns: [
          {
            prop: 'name',
            label: '音乐标题',
            scopedSlots: commonHighLightSlotScopes
          },
          {
            prop: 'artistsText',
            label: '歌手',
            scopedSlots: commonHighLightSlotScopes
          },
          {
            prop: 'albumName',
            label: '专辑',
            scopedSlots: commonHighLightSlotScopes
          },
          {
            prop: 'durationSecond',
            label: '时长',
            width: '100',
            scopedSlots: {
              default: (scope) => {
                return <span>{formatTime(scope.row.durationSecond)}</span>;
              }
            }
          }
        ]
      };
    },
    methods: {
      onRowClick(song) {
        console.log(song);
      }
    },
    render() {
      console.log(111, Table);
      const elTableProps = Table.props;
      // 从$attrs里提取作为prop的值
      // 这里要注意的点是驼峰命名法(camelCase)和短横线命名法(kebab-case)
      // 都是可以被组件接受的，虽然elTable里的prop定义的属性叫cellClassName
      // 但是我们要把cell-class-name也解析进prop里
      const { props, attrs } = genPropsAndAttrs(this.$attrs, elTableProps);

      const tableAttrs = {
        attrs,
        on: {
          ...this.$listeners,
          ['row-click']: this.onRowClick
        },
        props: {
          ...props,
          cellClassName: 'cus-tbl-cell',
          data: this.songs
        },
        style: { width: '99.9%' }
      };
      return this.songs.length ? (
        <el-table {...tableAttrs}>
          {this.columns.map((column, index) => {
            const { scopedSlots, ...columnProps } = column;
            return <el-table-column key={index} props={columnProps} scopedSlots={scopedSlots}></el-table-column>;
          })}
        </el-table>
      ) : null;
    }
  };
</script>